<!--
 * @Author: yangy aidreams@sina.com
 * @Date: 2023-12-25 16:35:42
 * @LastEditors: yangy aidreams@sina.com
 * @LastEditTime: 2024-02-27 17:13:08
 * @FilePath: /admin_vue3_element_plus/src/views/notice/list.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-card shadow="never" class="border-0">

    <el-form :model="searchForm" label-width="80px" class="mb-3">
        <el-row :gutter="20">
            <el-col :span="8" :offset="0">
                <el-form-item label="关键词">
                    <el-input v-model="searchForm.keyword" placeholder="管理员昵称" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8" :offset="8">
                <div class="flex items-center justify-end">
                    <el-button type="primary" @click="getData()">搜索</el-button>
                    <el-button @click="resetSearchForm">重置</el-button>
                </div>
            </el-col>
        </el-row>
        
    </el-form>
    
   <!-- 新增|刷新 -->
   <div class="flex items-center justify-between mb-4">
    <el-button type="primary" size="small" @click="handleCreate">新增</el-button>
    <el-tooltip
        effect="dark"
        content="刷新数据"
        placement="top"
    >
      <el-button text @click="getData">
        <el-icon><Refresh /></el-icon>
      </el-button>
    </el-tooltip>
   </div>

    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column label="管理员" width="200">
        <template #default="{ row }">
            <div class="flex items-center">
                 <el-avatar :size="40" :src="row.avatar">
                    <img
                        src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                    />
                </el-avatar>
                <div class="ml-3">
                    <h6>{{ row.username }}</h6>
                    <small>ID:{{row.id}}</small>
                </div>
            </div>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名"  />
      <el-table-column label="所属管理员"  align="center">
        <template #default="{ row }">
            {{row.role?.name || '-'}}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120">
        <template #default="{ row }">
            <el-switch :modelValue="row.status" :active-value="1" :inactive-value="0">
            </el-switch>
            
        </template>
      </el-table-column>
      <el-table-column prop="update_time" label="更新时间" />
      <el-table-column prop="order" label="排序" />
      <el-table-column label="操作" width="160" align="center">
        <template #default="scope">
           <el-button type="primary" size="samll" text @click="handleEdit(scope.row)">修改</el-button>
           <el-popconfirm title="是否要删除该管理员?" confirm-button-text="确认" cancel-button-text="取消" @confirm.stop="handleDelete(scope.row.id)">
              <template #reference>
                <el-button text class="px-1" type="primary" size="small">删除</el-button>
              </template>
           </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
      <!-- 分页 -->
      <div class="flex justify-center items-center mt-5">
          <el-pagination background layout="prev,pager,next" :total="total" v-model:current-page="currentPage" :page-size="limit" 
          @current-change="getData"/>
      </div>

      <!-- 抽屉组件 -->
      <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
          <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
            <el-form-item label="公告标题" prop="title">
              <el-input v-model="form.title" placeholder="公告标题"></el-input>
            </el-form-item>
            <el-form-item label="公告内容" prop="content">
              <el-input v-model="form.content" placeholder="公告内容" type="textarea" rows="5"></el-input>
            </el-form-item>
          </el-form>
      </FormDrawer>
  </el-card>
  
</template>
  
<script setup>
import { onMounted, ref,reactive,computed } from "vue"
import FormDrawer from "@/components/FormDrawer.vue"
import { getManagerList } from '@/api/manager.js'
import { Eptoast } from '@/utils/util.js'
const tableData = ref([])
const loading = ref(false)
const editId = ref(0)
const drawerTitle = computed(()=>editId.value ? "修改":"新增")
// 表单部分
const formDrawerRef = ref(null)
const formRef= ref(null)
const form = reactive({
  title:"",
  content:"",
})

const searchForm = reactive({
    keyword:""
})

const resetSearchForm = ()=>{
    searchForm.keyword = ""
    getData()
}

const rules ={
  title:[{
        required: true,
        message: "公告标题不能为空",
        trigger: "blur",
      }],
  content:[{
        required: true,
        message: "公告内容不能为空",
        trigger: "blur",
      }]
}

// 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)

//获取数据 p是接收current-change传过来的当前页码
function getData(p=null){
  if(typeof p == "number"){
    currentPage.value = p
  }
  loading.value = true
  // 获取数据的时候传当前页的页码
  getManagerList(currentPage.value,searchForm).then(res=>{
      tableData.value = res.data.list;
      total.value = res.data.totalCount
  }).finally(()=>{
    loading.value=false
  })
}

// 打开抽屉组件
const handleCreate = ()=>{
  editId.value = 0 //区分是新增还是修改
  resetForm({
    title:"",
    content:"",
  }) //重置表单项
  formDrawerRef.value.open()
}
//重置表单
function resetForm(row=false){
  if(formRef.value){
    formRef.value.clearValidate()
  }
// 这样不用重新请求编辑接口,将该对象重新赋值了
  if(row){
    for(let key in form){
      form[key] = row[key]
    }
  }
}

// 新增
const handleSubmit = ()=>{

    formRef.value.validate((valid)=>{
      if(!valid){
        return
      }
      // 提交按钮的loading状态
      formDrawerRef.value.showLoading()
      const fun = editId.value ? updateNotice(editId.value,form):createNotice(form)
      fun.then(res=>{
        Eptoast(drawerTitle.value+"成功")
        // 修改刷新当前页,新增刷新第一页
        getData(editId.value ? false : 1)
        formDrawerRef.value.close()
      }).finally(()=>{
        formDrawerRef.value.hideLoading()
      })
    })
}

// 删除
const handleDelete = (id)=>{
  loading.value = true;
  deleteNotice(id).then(res=>{
    Eptoast('删除成功')
    getData() // 删除成功后刷新本页
  }).finally(()=>{
    loading.value = false;
  })
}

// 修改
const handleEdit = (row)=>{
  editId.value = row.id
  resetForm(row)
  formDrawerRef.value.open()
  console.log(row);

}
onMounted(()=>{
  getData()
})
</script>